<!--列表数据新增页面-->
<template>
    <div class="fromArea">

        <!--        <fromheader></fromheader>-->


        <div class="main" style="margin-top: 102px;">
            <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="标题：">
                    <el-input placeholder="请输入标题" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="起止时间：">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="selectDate"
                            style="width:100%"
                            v-model="form.daterange"
                            type="daterange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="目标描述：">
                    <el-input placeholder="请输入你的阶段性工作目标" type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="衡量标准：">
                    <el-input placeholder="请输入衡量标准" type="textarea" v-model="form.metrics"></el-input>
                </el-form-item>
                <el-form-item label="客户：">
                    <el-input aria-placeholder="请描述你服务的客户，内部客户直接@姓名/工号" v-model="form.customer"></el-input>
                </el-form-item>
                <el-form-item label="邀评人：">
                    <el-input placeholder="请直接@姓名/工号，最多可邀请5人" v-model="form.judges"></el-input>
                </el-form-item>
                <el-form-item label="权重：">
                    <el-input-number v-model="form.weights"
                                     style="width: 100px;"
                                     controls-position="right"
                                     @change="handleChangeNumber" :min="1" :max="10000">
                    </el-input-number>
                    %
                </el-form-item>

                <el-form-item label="目标公开：">
                    <el-radio-group v-model="form.publicState">
                        <el-radio label="公开"></el-radio>
                        <el-radio label="部分公开"></el-radio>
                        <el-radio label="不公开"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.publicState==='部分公开'">
                    <el-input placeholder="请输入内容" v-model="form.publicContent"></el-input>
                </el-form-item>
                <el-form-item>
                    <span style="color: #888e8e">客户、邀评人默认被分享</span>
                </el-form-item>

                <el-form-item>
                    <el-button @click="submit" type="primary">提交</el-button>
                    <el-button>保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    // import cookiesTools from "../../utils/cookiesTools"

    export default {
        name: "index",
        components: {
            // fromheader,

        },

        data() {
            return {
                form: {
                    daterange: [],//时间段数组
                    title: "",//标题
                    desc: "",//目标描述
                    startDate: "",//开始时间
                    endDate: "",//结束时间
                    metrics: "",//衡量标准
                    customer: "",//客户
                    judges: "",//邀评人
                    weights: "",//权重
                    publicState: "公开",//公开状态
                    publicContent: "",//公开内容
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    resource: [
                        {required: true, message: '请选择活动资源', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: '请填写活动形式', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
        },

        /*函数体*/
        methods: {

            /*时间选择回调*/
            selectDate(obj) {
                this.form.startDate = obj[0]
                this.form.endDate = obj[1]
                console.log("obj::", obj)
                console.log("this.from.daterange::", this.form.daterange)

            },


            submit() {
                /*提交的时候，可以获取到全部表单中的数据*/
                console.log("提交表单：：", this.form)
                let tableData = JSON.parse(this.cookie.getCookies("tableData"))
                tableData.push(this.form)
                this.cookie.setCookies("tableData", JSON.stringify(tableData))
                this.$router.go(-1);//返回上一层
                // vue 修改json文件,是js代码操作系统文件的过程，脚本代码不具备文件操作权限，需要通过专门的工具，调动计算机系统的接口，进行文件操作


                //学会操作浏览器的cookies ,把数据缓存到cookies中,进行临时性的crud操作

                //vue 安装cookies插件，并封装cookies工具类，方便操纵cookies


                // 测试cookies的写入
                // let formCookie = this.cookie.setCookies("form", JSON.stringify(this.form));


                /*测试cookies的获取
                let cookies1 = cookiesTools.getCookies("name");
                console.log("获取到了吗：", cookies1)
                */


                /*测试cookies的删除
                 let cc = this.cookie.deleteCookies("name");
                 console.log("所有的：：", cc)*/

                /*测试获取所哟cookies*/
                /*let allCookies = this.cookie.getAllCookies();
                console.log("所有的：：", allCookies)*/


                /*叠加操作*/
                //1.获取cookies中的tableData
                /* let tableData = JSON.parse(this.cookie.getCookies("tableData"));
                 tableData.push(this.form)
                 this.cookie.setCookies("tableData", JSON.stringify(tableData))

                 this.$router.go(-1);//返回上一层*/

                //2.把当前提交的表单数据添加到tableData中

                //3.再把tableData覆盖掉cookies中的tableData，实现叠加效果


            },


            cookies() {
                /*测试写入*/
                this.$cookies.set("name", "zhangsan", "30")
                /*测试读取*/
                let name1 = this.$cookies.get("name");
                console.log(name1)
            },

            /*权重变动回调*/
            handleChangeNumber() {

            },
        },

        /*生命周期钩子函数：页面初始化成功后加载*/
        mounted() {
            // console.log("跳过来了", this.$route.params.id)

        },

        /*监听数据变化*/
        updated() {
            /*...  是对象展开符号*/
            // console.log("数据表单变化了：\n", {...this.form})

        }


    }
</script>

<style scoped>
    .fromArea {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        height: 75%;
        margin: 25px;
    }

    .fromArea .main {
        width: 600px;
        height: 700px;
        text-align: left;
    }
</style>
